<template>
  <view class="container">
    <u-navbar title="全部分类" title-size="36" :border-bottom="false"> </u-navbar>
    <u-gap height="20"></u-gap>
    <view class="goods-box">
      <view class="rightView">
        <scroll-view
          scroll-y
          class="scrollView"
          :style="{ height: `${scrollViewHeight}px` }"
          :enhanced="true"
          :show-scrollbar="false"
        >
          <view class="menuView">
            <view
              :class="checkedOneCateIndex == index ? 'menuTab' : 'menuTab2'"
              v-for="(cate_one, index) in menuList"
              :key="index"
              @click="onMenuTab(index, cate_one)"
            >
              {{ cate_one.name }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="leftView" style="top: 80rpx">
        <view
          class="headView"
          :style="{ top: `${navbarHeight + statusBarHeight + 10}px` }"
          v-if="
            menuList[checkedOneCateIndex] &&
            menuList[checkedOneCateIndex].children &&
            menuList[checkedOneCateIndex].children.length > 0
          "
        >
          <scroll-view
            scroll-x
            class="scrollViewX"
            :enhanced="true"
            :show-scrollbar="false"
            :scroll-left="scrollLeft"
            :scroll-into-view="cateTwoId"
          >
            <view
              class="menuView2"
              :id="`cate-three-id-${two}`"
              :class="checkedTwoCateIndex == two ? 'menuView2-ch' : ''"
              v-for="(cate_two, two) in menuList[checkedOneCateIndex].children"
              :key="two"
              @click="onMenuTab2(two, cate_two)"
            >
              {{ cate_two.name }}
            </view>
          </scroll-view>
        </view>
        <view
          class="cate-content"
          v-if="
            menuList[checkedOneCateIndex] &&
            menuList[checkedOneCateIndex].children &&
            menuList[checkedOneCateIndex].children.length > 0
          "
          style="background-color: #fff"
        >
          <scroll-view
            scroll-y
            class="scrollView"
            @scroll="cateScroll"
            :scroll-into-view="cateThreeId"
            :style="{ height: `${scrollViewHeight}px` }"
            :enhanced="true"
            :show-scrollbar="false"
          >
            <view
              class="cate-item"
              v-for="(cate_two, two) in menuList[checkedOneCateIndex].children"
              :key="two"
            >
              <view class="two-cate-name" :id="`cate-three-id-${two}`">{{ cate_two.name }}</view>
              <view class="content dis-flex">
                <view
                  class="itemView"
                  v-if="cate_two.children && cate_two.children.length > 0"
                  v-for="(item, three) in cate_two.children"
                  :key="three"
                >
                  <view class="">
                    <u-image
                      @click="routeTo('/shops/cate-detail?cate=' + JSON.stringify(item))"
                      width="160"
                      height="160"
                      :src="item.iconUrl"
                      border-radius="8"
                    ></u-image>
                    <view class="itemInfo">
                      <view class="itemTitle oneline-hide-1">{{ item.name }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view v-else class="empty-cate dis-flex flex-y-center">
          <u-image
            style="margin-bottom: 20rpx"
            :src="`${getImageUrl('empty.png')} `"
            width="410rpx"
            height="240rpx"
          ></u-image>
          暂无更多分类
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      cateThreeId: 'cate-three-id-0',
      cateTwoId: 'cate-two-id-0',
      checkedOneCateIndex: 0,
      checkedTwoCateIndex: 0,
      scrollLeft: 0,
      // scrollHeight: "800rpx",
      menuList: [],
      menuIndex: 0,
      statusBarHeight: systemInfo.statusBarHeight,
      pageHight: systemInfo.screenHeight,
      height: 0,
      anims: [],
      disable: false,
      addXart: null
    }
  },
  computed: {
    navbarHeight() {
      let navbarHeight = 0,
        pageHight = systemInfo.screenHeight,
        statusBarHeight = systemInfo.statusBarHeight
      // #ifdef APP-PLUS || H5
      navbarHeight = this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      navbarHeight = this.height ? this.height : height
      // #endif

      return navbarHeight
    },
    scrollViewHeight() {
      let scrollViewHeight = 0,
        pageHight = systemInfo.screenHeight,
        statusBarHeight = systemInfo.statusBarHeight
      // #ifdef APP-PLUS || H5
      scrollViewHeight = this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      scrollViewHeight = this.height ? this.height : height
      // #endif

      return pageHight - scrollViewHeight - statusBarHeight - 20
    }
  },
  onLoad() {
    this.$u
      .get('/app-api/shop/category/tree', {
        parentCode: 'mall'
      })
      .then((res) => {
        // console.log('res',res.data)
        this.menuList = res.data
      })
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    onMenuTab(index, item) {
      this.checkedOneCateIndex = index
    },
    onMenuTab2(index, item) {
      this.cateThreeId = `cate-three-id-${index}`
      this.checkedTwoCateIndex = index
    },
    cateScroll() {
      const query = uni.createSelectorQuery().in(this)
      query
        .selectAll('.cate-item')
        .boundingClientRect((data) => {
          for (var cate = 0; cate < data.length; cate++) {
            if (data[cate].top < 200 && data[cate].top > 0) {
              this.cateThreeId = data[cate].id
              this.checkedTwoCateIndex = cate
              // console.log('checkedTwoCateIndex', this.checkedTwoCateIndex)
              if (this.checkedTwoCateIndex >= 3) {
                this.scrollLeft = 580 * 2 - (3 - this.checkedTwoCateIndex) * 100
                // console.log('this.scrollLeft', this.scrollLeft)
              } else {
                this.scrollLeft = 0
              }
            }
          }
        })
        .exec()
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('@/style/btn.css');

.container {
  position: relative;
}

.empty-cate {
  flex-flow: column;
  color: #999999;
  text-align: center;
  margin-left: 80rpx;
  font-size: 24rpx;
}

.card {
  margin: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.store-info {
  height: 120rpx;
  flex-flow: column;
  padding: 10rpx 20rpx;

  .store-name {
    font-size: 30rpx;
    color: #333333;
  }

  .store-des {
    font-size: 26rpx;
    color: #999999;
  }
}

.goods-box {
  position: relative;

  .rightView {
    width: 180rpx;
    height: 100%;
    position: fixed;
    left: 0;
    // background: #F7F7F7;

    .menuTab {
      height: 110rpx;
      line-height: 110rpx;
      // background: #D7F5F1;
      text-align: center;
      font-size: 30rpx;
      font-weight: 600;
      // color: #10A28F;
      position: relative;
      border-left: 8rpx solid #333333;
      box-sizing: border-box;
      border-radius: 6rpx;
    }

    .menuTab2 {
      height: 110rpx;
      line-height: 110rpx;
      // border-bottom: 1px solid #fff;
      text-align: center;
      border-left: 8rpx solid #eeeeef;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }
  }

  .leftView {
    position: absolute;
    left: 180rpx;
    top: 80rpx;
    z-index: 0;
    width: 570rpx;
  }

  .headView {
    position: fixed;
    background: #fff;
    z-index: 800;
    height: 80rpx;
    left: 180rpx;
    width: 570rpx;

    .scrollViewX {
      width: 570rpx;
      white-space: nowrap;
      box-sizing: border-box;
      padding-top: 20rpx;

      .menuView2:first-child {
        margin-left: 20rpx;
      }

      .menuView2 {
        display: inline-block;
        margin-right: 20rpx;
        background: #f0f0f0;
        border-radius: 22rpx;
        font-size: 24rpx;
        color: #666666;
        padding: 8rpx 20rpx;
      }

      .menuView2-ch {
        background: #10a28f;
        color: #fff;
      }
    }
  }

  .content {
    background-color: #fff;
    padding: 20rpx;
    flex-wrap: wrap;
    padding-right: 0;
  }
}

.cate-content {
}

.two-cate-name {
  font-size: 28rpx;
  color: #333333;
  padding: 30rpx 20rpx;
}

.itemView:last-child {
  margin-bottom: 0;
}

.itemView {
  display: flex;
  margin: 0px;
  margin-bottom: 20rpx;
  background-color: #fff;
  width: 33.3%;

  .itemTitle {
    font-size: 28rpx;
    color: #333333;
    margin-top: 20rpx;
  }
}
</style>
